<template>
  <div class="firstBG">
    <h1 style="font-family: 'ZCOOLKuaiLe-Regular';font-size: 40px; color: #161647; text-align: center; padding-top: 30px;">照片智能备份，生活点滴不被遗落</h1>
    <el-carousel :interval="3000" type="card" class="imags" >
      <el-carousel-item v-for="url in urls" :key="url">
        <el-image :src="url" ></el-image>
      </el-carousel-item>
    </el-carousel>

    <div style=" padding-top: 2%;">
      <h1 style="font-size: 60px; text-align: center; color: #161647; padding-bottom: 10px;">备份无忧 整理有序</h1>
      <el-row :gutter="20">  
        <el-col :span="5" :offset="'3'-0">
          <span style="margin-top: 10%;">
            <h2 style="color: #161647; font-size: 40px;">多设备备份</h2>
            <p style="font-family: 'ZCOOLKuaiLe-Regular';font-size: 18px; color: #9292a6;">你可以将手机、电脑、平板、应用中的文件便捷备份到云端，一处备份，多端纵览无余，安全无忧。支持最高1T超大文件和原画备份。</p>
         </span>
      </el-col>    
        <el-col :span="10" :offset="'1'-0">
          <el-image style="width: 500px; height: 300px" :src="firstpc1" ></el-image>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="padding-top: 5%;">      
        <el-col :span="10" :offset="'2'-0">
          <el-image style="width: 500px; height: 300px" :src="firstpc2" ></el-image>
        </el-col>
        <el-col :span="5">
          <span style="margin-top: 10%;">
            <h2 style="color: #161647; font-size: 40px;">资料智能整理</h2>
            <p style="font-family: 'ZCOOLKuaiLe-Regular';font-size: 18px; color: #9292a6;">强大的智能整理能力让你一键整理云端资料，文件资料分类有序。</p>
         </span>
      </el-col>
      </el-row>
    </div>
    <div class="footer">
      <el-row :gutter="20">
      <el-col :span="16" :offset="'6'-0"><span style="font-size: 15px;color: #9292a6;font-family: 'ZCOOLKuaiLe-Regular'">友情链接: </span><el-link  type="info" href="https://alibabacloud.com">阿里云 |</el-link> <el-link  type="info" href="https://www.aliyundrive.com/">阿里云盘</el-link><span style="font-size: 15px;color: #9292a6;font-family: 'ZCOOLKuaiLe-Regular';padding-left: 20%;">商务合作:aliotrowerh545@gmail.com</span></el-col>
      </el-row>
      <el-row :gutter="20">
      <el-col :span="16" :offset="'6'-0"><span style="font-size: 10px;color: #9292a6;font-family: 'ZCOOLKuaiLe-Regular'">开发者：iShowCode ｜ 版本号：V1.0.0 ｜ 用户权限 ｜ 隐私权限 ｜ 侵权投诉政策 投诉邮箱：aliotrowerh545@gmail.com</span></el-col>
      </el-row>
      <el-row :gutter="20">
      <el-col :span="12" :offset="'10'-0"><span style="font-size: 10px;color: #9292a6;font-family: 'ZCOOLKuaiLe-Regular'">鄂ICP备20230226773号-1</span></el-col>
    </el-row>
      <el-row :gutter="20">
      <el-col :span="12" :offset="'10'-0"><span style="font-size: 10px;color: #9292a6;font-family: 'ZCOOLKuaiLe-Regular'">Copyright ©iShowCode</span></el-col>
      </el-row>

    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        urls:[
          require("../assets/pc/lunbo1.jpg"),
          require("../assets/pc/lunbo2.jpg"),
          require("../assets/pc/lunbo3.jpg"),
          require("../assets/pc/lunbo4.png"),
        ],
        firstpc1: require("../assets/pc/first1.png"),
        firstpc2: require("../assets/pc/first2.png"),
        
      };
    },
    methods: {
      
    },
    mounted(){
      if (location.href.indexOf("#reloaded") == -1) {
        location.href = location.href + "#reloaded";
                location.reload();
            }
            this.$router.push('/')
    },
  }
</script>
<style>
.footer{
  padding-top: 10%;
}
.imags{
    margin-top: 10px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.firstBG{
  background:linear-gradient(rgb(239, 244, 255) 0%, rgba(255, 255, 255, 0) 100%);
  margin: 0;
}
</style>